今日目標

1. 利用 Flask-RESTX 建立簡單的 API
2. 使用 Flask-RESTX 提供的 swagger UI 測試 API
3. 建立 task delete API 並測試
4. 使用 MVC 架構整理程式碼
   讓我們馬上開始吧!! GoGo!

利用 Flask-RESTX 建立簡單的 API

因為我們這次專案使用前後端分離的架構
所以後端只傳送資料而不建構 HTML、CSS，也就是說我們將 Flask 當作單純的 API 來使用。
那如何更簡潔的把後端當作 RESTful API 來使用呢？
在 Flask 中可以使用 Flask-RESTX，他還整合和 Swagger UI 讓開發中測試 API 變得非常方便！

上資源：
Flask-RESTX’s documentation
燃燒大三的成果發表第十九天 - Flask-RESTX(上) - iT 邦幫忙- 針對 Swagger UI 寫得非常清楚!!

• 分別利用原生 Flask 與 Flask-RESTX 建立 API

  • Flask

     @app.route('/api/task', methods=['GET', 'POST'])
     def task():
         if request.method == 'POST':
             data = request.get_json()
             if 'task' in data:
                 tasks.append(data['task'])
                 return {'message': 'Task added successfully'}, 201
             else:
                 return {'message': 'Invalid request data'}, 400
    

  • Flask-RESTX

    from flask_restx import Namespace ,Resource
    tasks_ns = Namespace(name="Task", path="/api/tasks")
    
    @tasks_ns.route("") 
    class TaskListAPI(Resource):
    
        @tasks_ns.expect(task_model)
        def post(self):
            data = tasks_ns.payload
            tasks = []
            if 'task' in data:
                tasks.append(data['task'])
                return {'message': 'Task added successfully'}, 201
            else:
                return {'message': 'Invalid request data'}, 400
    

  • Flask-RESTx優點：

    • 測試 API 容易，使用 Swagger UI 輕鬆測試 API
    • 簡化路由定義，使用函數命名取代 method 的設立與驗證
    • 取得數據容易，使用 api.payload 取得所有請求數據
    • 自動轉化 JSON，只要 return 的符合 JSON 會自動轉換後再回傳
    • 狀態碼添加容易，在 return 中添加即可
    • . . .

  • Swagger UI 補充

    • 大部分的設定可以參考上面 LiGa 大大的文章，這邊補充一下若想要針對每個 API 添加說明的方式
      • 

使用 Flask-RESTX 提供的 swagger UI 測試 API

直接上圖

• 
• 
• 
  成功啦!!!

建立 task delete API 並測試

• 根據我們建立的 delete API 文件：
  • Route 是 /api/tasks/{id}
  • 需要前端在 URL 中放上要刪除的任務 id
  • 利用 id 取得該 task
  • 若該 task 不存在，回傳 404
  • 若該 task 存在，回傳 204
  • jwt 驗證的部分之後會添加

  # tasks_controller.py
  from .tasks_model import *
  
  @tasks_ns.route("/<int:id>")
  class TaskAPI(Resource):
  
      # @jwt_required()
      def delete(self, id):
          "Delete Task"
          task = get_task_by_id(id)
          if not task:
              return {"message": "Task does not exist"}, 404 
          delete_task(task)
          return {}, 204
  

• 測試-成功!
  • 

使用 MVC 架構整理程式碼

• MVC架構是什麼？
• 簡單說就是：
  • 將程式碼分為處理資料的 Model、處理畫面的 View、處理流程的 Controller
  • 分工清楚的好處是提高程式碼的復用性也更容易閱讀
  • 後面維護與擴展更容易
• 在我們的 tasks_controller.py 中，會將資料處理的部分分離到 tasks_model.py，並在 tasks_controller.py 引用
  • 例如：

    # tasks_model.py
    from ...extensions import db
    from ...models import Task
    
    def get_task_by_id(id):
        return Task.query.get(id)
    
    def delete_task(task):
        db.session.delete(task)
        db.session.commit()
    
    
    # tasks_controller.py
    from .tasks_model import *
    ...
    

打完收工

Todo App 若有更新會放在文章的最後面，各位大大在玩的時候若有問題或覺得可以修改的地方再麻煩留言告知！